<template>
    <div class="i-goods">
        <img v-lazy="imgurl">
        <div class="detail">
            <span class="text f14">
                {{ extension_title }}
            </span>
            <div class="situation">
                <span v-for="item in machining(rent_label)">{{ item }}</span>
            </div>
            <div class="price">
                <span class="normal">
                    <span>￥&nbsp;</span>
                    <span class="value">{{ min_price }}</span>
                    <span>/天</span>
                </span>
                <span class="discount" v-if="dayRent_new">
                    <span>卷&nbsp;后￥</span>
                    <span class="value">{{ dayRent_new }}</span>
                    <span>/天</span>
                </span>
            </div>
            <span class="first-month" v-if="activity_title">{{ activity_title }}</span>
        </div>
    </div>
</template>
<script>
export default {
    name: "Commodity",
    props: {
        activity_title: String,
        dayRent_new: String,
        extension_title: String,
        imgurl: String,
        min_lease_term: String,
        min_price: String,
        min_price_g: String,
        new_grade: String,
        rent_label: String,
        title: String,
    },
    methods: {
        machining(status) {
            if (!status.length) return [];
            return status.split(",");
        },
    }
}
</script>
<style lang="scss" scoped>
.i-goods {
    width: 100%;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;

    img {
        padding: 10px;
        padding-bottom: 0;
        width: 100%;
    }

    .detail {
        padding: 10px;

        .text {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .situation {
            margin: 5px 0;

            span {
                color: #66c49f;
                background-color: #e7f6ef;
                padding: 5px 3.5px;
                font-size: 12px;
                margin-right: 5px;
                border-radius: 4px;

                &.green {
                    color: #66c49f;
                    background-color: #e7f6ef;
                }

                &.red {
                    color: #e2555e;
                    background-color: #ffebec;
                }
            }
        }

        .price {
            display: flex;
            font-size: 12px;
            justify-content: space-between;
            align-items: center;
            white-space: nowrap;

            .normal {
                color: #f3443f;

                span {
                    display: inline-block;
                    transform: scale(.8);
                }

                .value {
                    margin-left: -5px;
                    font-size: 12px;
                    transform: scale(1);
                }
            }

            .discount {
                color: white;
                background-color: #f3443f;
                padding: 1px 0;
                border-radius: 4px;
                white-space: nowrap;

                span {
                    display: inline-block;
                    transform: scale(.7);
                }

                .value {
                    margin-left: -5px;
                    font-size: 16px;
                    transform: scale(.9);
                }
            }
        }

        .first-month {
            font-weight: bold;
            font-size: 14px;
        }
    }
}
</style>